import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 引入中文语言包
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// 引入全局主题样式
import '@/assets/global-theme.css'

// 引入消息提示组件
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus'
// 引入美化的消息提示工具
import { message, notify, confirm, feedback, showCustomerService } from '@/utils/message'

const app = createApp(App)

// 全局错误处理
app.config.errorHandler = (err, vm, info) => {
  // 忽略Element Plus的getComputedStyle错误
  if (err.message && err.message.includes('getComputedStyle')) {
    console.warn('Element Plus getComputedStyle error (ignored):', err.message)
    return
  }
  
  // 其他错误正常处理
  console.error('Vue Error:', err)
  console.error('Error Info:', info)
}

// 注册Element Plus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(store)
app.use(router)

// 路由守卫：根据路由动态切换主题
router.beforeEach((to, from, next) => {
  if (to.path.startsWith('/admin')) {
    // 管理员页面，应用青色主题
    document.body.classList.add('admin-theme')
  } else {
    // 用户页面，移除青色主题
    document.body.classList.remove('admin-theme')
  }
  next()
})

// 配置Element Plus使用中文
app.use(ElementPlus, {
  locale: zhCn,
})

// 全局挂载消息提示方法（保持兼容性）
app.config.globalProperties.$message = ElMessage
app.config.globalProperties.$notify = ElNotification
app.config.globalProperties.$confirm = ElMessageBox.confirm
// 挂载美化的消息提示方法
app.config.globalProperties.$msg = message
app.config.globalProperties.$notification = notify
app.config.globalProperties.$dialog = confirm
app.config.globalProperties.$feedback = feedback
app.config.globalProperties.$customerService = showCustomerService

// 初始化store状态（从localStorage恢复用户信息）
store.dispatch('initializeApp')

// 初始化主题（处理页面刷新的情况）
if (window.location.pathname.startsWith('/admin')) {
  document.body.classList.add('admin-theme')
} else {
  document.body.classList.remove('admin-theme')
}

app.mount('#app')
